﻿@page "/"
@inherits CoffeeComponentBase
@inject Blazored.LocalStorage.ILocalStorageService localStorage

<TelerikTileLayout Columns="3"
                   Class="tile-layout-style"
                   Reorderable="true"
                   @ref="tileLayout"
                   OnReorder="SaveState">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="@L["Sales"]" ColSpan="1">
            <Content>
                <img class="k-card-image" src="./img/Sales.jpg">
                <p class="card-description">@L["Index_SalesCard_Description"]</p>
                <div class="k-card-actions k-card-actions-stretched">
                    <span class="k-card-action"><a href="/blazor-coffee/sales" class="k-button k-primary">@L["Sales"]</a></span>
                </div>
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="@L["HumanCapital"]" ColSpan="1">
            <Content>
                <img class="k-card-image" src="./img/Schedule.jpg">
                <p class="card-description">@L["Index_EmployeesCard_Description"]</p>
                <div class="k-card-actions k-card-actions-stretched">
                    <span class="k-card-action"><a href="/blazor-coffee/manage-employees" class="k-button k-primary">@L["HumanCapital"]</a></span>
                </div>
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="@L["ManageProducts"]" ColSpan="1">
            <Content>
                <img class="k-card-image" src="./img/coffee.jpg">
                <p class="card-description">@L["Index_ProductsCard_Description"]</p>
                <div class="k-card-actions k-card-actions-stretched">
                    <span class="k-card-action"><a href="/blazor-coffee/manage-products" class="k-button k-primary">@L["ManageProducts"]</a></span>
                </div>
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<div class="card-menu">
    <TelerikTooltip TargetSelector=".k-card-footer>span[title]" Position=@TooltipPosition.Top ShowOn="@TooltipShowEvent.Hover" />
</div>

@code {
    TelerikTileLayout tileLayout { get; set; }

    async Task SaveState()
    {
        await localStorage.SetItemAsync("IndexLayout", tileLayout.GetState());
    }

    protected override void OnInitialized()
    {
        Layout.DocsTitle = L["Home"];

        base.OnInitialized();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var state = await localStorage.GetItemAsync<TileLayoutState>("IndexLayout");
            if (state != null)
            {
                tileLayout.SetState(state);
            }
        }
    }
}